import { TreeSelect } from 'antd';
import { useEffect, useState } from 'react';
import type { GetProp, TreeSelectProps } from 'antd';
import { ISelectProps } from './types';

type DefaultOptionType = GetProp<TreeSelectProps, 'treeData'>[number];

export default function MaterialCalculix(props: ISelectProps) {
  const [value, setValue] = useState<string[]>([]);
  const [treeData, setTreeData] = useState<Omit<DefaultOptionType, 'label'>[]>(
    [],
  );
  useEffect(() => {
    const values = props.value as string[];
    setValue(values);
    setTreeData(props.options);
  }, [props.value]);
  const handleInputChange = (value: string | number | string[]) => {
    const values = value as string[];
    props.onChange(values);
    setValue(values);
  };

  return (
    <TreeSelect
      showSearch
      style={{ width: '100%' }}
      value={value}
      disabled={props.disabled}
      dropdownStyle={{ width: '260px', maxHeight: 400, overflow: 'auto' }}
      placeholder='请选择'
      allowClear={props.multiple}
      multiple={props.multiple}
      treeDefaultExpandAll
      onChange={(value) => handleInputChange(value)}
      treeData={treeData}
    />
  );
}
